<template>
	<view class="moxi_c_diy_image">
		<view v-for="list in set.data" class="medium" @click="navto(list.url)"
			:style="'height: ' + getHeight(list, list.is_custom) +';width:'+list.width+'%;margin:'+set.margin+'px 0;'">
			<image class="images-list" :showLoading="true" v-if="list.media == 'image'"
				:style="'width: 100%;height: 100%;border-radius: '+list.radius" :src="list.img"
				:fade-show="list.fade==1?true:false" show-menu-by-longpress :mode="getType(list.is_custom, list.type)"
				 alt="">
			</image>

			<!-- #ifdef MP-WEIXIN -->
			<video :src="list.vid" :autoplay="list.autoplay == 0 ? false : true" :loop="list.loop == 0 ? false : true"
				:muted="list.muted == 0 ? false : true" :show-mute-btn="list.muted == 0 ? false : true"
				:poster="list.poster" v-if="list.media == 'video'" :object-fit="list.object_fit"
				style="width: 100%;height: 100%;" bindplay="handleVideoPlay"></video>
			<!-- #endif -->

			<!-- #ifdef H5 -->
			<video :src="list.vid" :autoplay="list.autoplay == 0 ? false : true" :loop="list.loop == 0 ? false : true"
				:muted="list.muted == 0 ? false : true" :show-mute-btn="list.muted == 0 ? false : true"
				:poster="list.poster" v-if="list.media == 'video'" :object-fit="list.object_fit"
				style="width: 100%;height: 100%;"></video>
			<!-- #endif -->
			<text class="u-line-1" style="color: #555;font-size: 14px;margin: 3px 0;" v-if="list.title&&list.title.length">{{list.title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: "diy-image",
		data() {
			return {

			};
		},
		props: {
			set: {
				type: Object,
				default () {
					return {
						data: {},
						margin: ""
					}
				}
			}
		},
		created() {},
		methods: {
			getHeight(list, num) {
				if (num == 0) {
					return 'auto'
				} else {
					return list.height
				}
			},
			getType(num, type) {
				if (num == 0) {
					return 'widthFix'
				} else {
					if (type == 'scaleToFill') {
						return 'scaleToFill'
					} else if (type == 'aspectFill') {
						return 'aspectFill'
					}
				}
			}
		}
	}
</script>

<style scoped>
	/deep/ .uni-video-container {
		position: relative !important;
	}

	/deep/ uni-image>img {
		position: relative !important;
	}

.medium{display: flex;flex-direction: column;}
	.moxi_c_diy_image {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap
	}
</style>